<template>
	<view class="lottery_box">
		<nav-bar ref="navBar" type="transparentFixed" fontColor="#FFF" bgColor="#eb3b32" transparentFixedFontColor="#FFF">抽奖</nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<!-- <view class="status_bar"></view> -->
		<!-- 中奖记录 -->
		<image class="winning" src="http://qn.kemean.cn/upload/202008/17/15976518345204dkooqcf.png" mode="aspectFill" @click="onPageJump('/pagesMy/my/vip/lotteryRecord')"></image>
		<!-- 转盘 -->
		<view class="turntable_box">
			<image class="turntable_content" :style="{transition: transition, transform: 'rotate('+ rotate+ 'deg)'}" :src="lotteryList.img"
			 mode="widthFix"></image>
			<image class="turntable_pointer" @click="onLottery" src="http://qn.kemean.cn/upload/202008/07/15967881574594e6gzxb2.png"
			 mode="widthFix"></image>
		</view>
		<!-- 积分 -->
		<view class="integral_box">
			<view class="integral">
				你的积分：{{lotteryList.numIntegral}}
			</view>
		</view>
		<!-- 中奖 -->
		<view class="winning_box">
			<swiper class="news_swiper" vertical circular :autoplay="true" :interval="3000" :duration="1000" :disable-touch="true"
			 display-multiple-items="4">
				<swiper-item v-for="(item,index) of winningList" :key="index">
					<view class="list_box">
						<text>{{item.userNickName}}</text>
						<text>{{item.giftTitle}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 说明 -->
		<view class="winning_box marginTop">
			<view class="list_box" v-for="(item,index) of lotteryList.description" :key="index">
				<text class="line_height">{{item}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				pageScroll: 0,
				transition: "all 4s cubic-bezier(0,0,0.58,1)",
				rotate: 0,
				lastRotate: 0,
				allowLottery: true,				
				lotteryList: [],
				winningList: [],
				prizeList: [],
				angle: 0
			};
		},
		computed: {

		},
		//第一次加载
		onLoad(e) {
			this.pageData();
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			pageData() {
				this.$http.get('api/turntable/v1/luckDraw').then(res => {
					this.lotteryList = res;
				})
				this.$http.get('api/turntable/v1/listNmae').then(res => {
					this.winningList = res;
				})
			},
			onLottery() {
				if (!this.allowLottery) {
					return;
				}
				if (this.lotteryList.numIntegral >= this.lotteryList.integral) {
					this.allowLottery = false;
					this.$http.get('api/turntable/v1/getGift').then(res => {
						console.log(res);
						this.prizeList = res;
						this.angle = this.prizeList.giftAngle;
						console.log(this.prizeList.giftAngle);
						this.rotate = this.prizeList.giftAngle + 1080 + this.lastRotate;
						console.log(this.rotate);
						this.lastRotate = this.rotate - this.prizeList.giftAngle;
						this.transition = "all 4s cubic-bezier(0,0,0.58,1)";
						this.lotteryList.numIntegral -= this.lotteryList.integral;

					})
					setTimeout(() => {
						this.allowLottery = true;
						this.pageData();
					}, 5000);
					if(this.prizeList.title){
						setTimeout(() => {
							// uni.showToast({
							// 	title: this.prizeList.title,
							// 	icon: 'none'
							// });
							uni.showModal({
								//title: '温馨提示',
								content: this.prizeList.title,
								showCancel: false
							})
							console.log("11111");
						}, 4500);
					}
				} else {
					uni.showToast({
						title: '您的积分不够',
						icon: 'none'
					});
				}

				// let reward = Math.random() * 100; // 80
				// console.log(reward);
				// let rewardInfo = {};
				// let lastVal = 101;
				// this.prizeList.forEach((item, index) => {
				// 	let min = 100 - item.probability;
				// 	if (lastVal > reward && reward >= min) {
				// 		lastVal = min;
				// 		rewardInfo = {
				// 			name: item.name,
				// 			index: index
				// 		}
				// 	}
				// });
				// console.log(rewardInfo);
				// let angle = 360 / this.prizeList.length;

			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		onPageScroll(e) {
			this.$refs.navBar.pageScroll(e);
			this.pageScroll = e.scrollTop;
		},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	page {
		min-height: 100vh;
		background-color: #eb3b32;
	}
	.winning{
		position: absolute;
		width: 158rpx;
		height: 53rpx;
		top: 200rpx;
		right: 0;
	}

	.lottery_box {
		min-height: 100vh;
		background-image: url(http://qn.kemean.cn/upload/202008/10/1597022933936wyyrrt04.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100%;
		padding-top: 446rpx;

		.status_bar {
			height: var(--status-bar-height);
		}

		.turntable_box {
			position: relative;
			margin: 0 auto; //居中
			height: 600rpx;
			background-image: url(http://qn.kemean.cn/upload/202008/07/1596786414678l64bdwcx.png);
			background-size: 100% auto;
			background-repeat: no-repeat;
			width: 600rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.turntable_content {
				margin: 0 auto; //居中
				width: 513rpx;
				height: 513rpx;
			}

			.turntable_pointer {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
				width: 172rpx;
				height: 172rpx;
			}
		}
	}

	.integral_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 46rpx;
		//margin-bottom: 96rpx;

		.line {
			width: 406rpx;
			height: 1px;
			background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffe998, rgba(255, 255, 255, 0));
		}

		.integral {
			font-size: 28rpx;
			color: #ffe998;
			text-align: center;
			width: 406rpx;
			//background: linear-gradient(to right, rgba(255, 255, 255, 0), #e3241a, rgba(255, 255, 255, 0));
			padding: 18rpx 0;
		}
	}

	.winning_box {
		//margin-top: 96rpx;
		margin: 110rpx auto 0 auto; //居中
		width: 630rpx;

		.news_swiper {
			height: 200rpx;

			swiper-item {
				height: 24rpx;
			}
		}

		.activity_box {
			position: relative;
			top: -18rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.line_left {
				width: 244rpx;
				height: 1px;
				background: linear-gradient(to left, #ffe998, rgba(255, 255, 255, 0));
			}

			.line_right {
				width: 244rpx;
				height: 1px;
				background: linear-gradient(to right, #ffe998, rgba(255, 255, 255, 0));
			}

			text {
				flex-shrink: 0;
				margin: 0 25rpx;
				font-size: 24rpx;
				color: #ffe998;
			}
		}

		.list_box {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding: 0 32rpx;
			//margin: 16rpx 10rpx;

			text {
				margin: 8rpx 0;
				font-size: 24rpx;
				color: #ffffff;
			}

			.line_height {
				line-height: 34rpx;
			}
		}

		.line {
			width: 630rpx;
			height: 1px;
			background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffe998, rgba(255, 255, 255, 0));
		}
	}

	.marginTop {
		margin: 110rpx auto 0 auto;
		padding-bottom: 180rpx;
	}
</style>
